<template>
    <div class="designer-left">
        <el-tabs>
            <el-tab-pane label="表单组件">
                <template v-for="(item, i) in library">
                    <el-divider>{{ item.title }}</el-divider>
                    <div class="sl-item" :data-index="i">
                        <div class="item" :data-id="index.type" v-for="index in item.item">
                            <div class="icon" v-if="index.icon">
                                <span :class="['iconfont', index.icon]"></span>
                            </div>
                            <div class="title">{{ index.label }}</div>
                        </div>
                    </div>
                </template>
            </el-tab-pane>
            <!--<el-tab-pane lazy label="表单模版">表单模版</el-tab-pane>-->
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import { initFormDrag } from '../lib/drag'
import { library } from '../lib/library'
import { onMounted } from 'vue'

onMounted(() => {
    initFormDrag()
})
</script>

<!--开发状态下临时处理-->
<style scoped lang="scss">
.designer-left {
    padding-left: 10px;
    padding-right: 10px;
}
.sl-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 10px;
    .item {
        margin-bottom: 10px;
        cursor: pointer;
        width: 33%;
        text-align: center;
        padding: 10px 0 5px 0;
        &:hover {
            background-color: var(--pt-color-primary-5);
            border-radius: 5px;
            .title,
            .icon > span {
                color: #ffffff;
            }
        }
        .icon > span {
            font-size: 20px;
        }
        .title {
            font-size: 14px;
            line-height: 40px;
        }
    }
}
</style>
